<template>
	<view class="pa-b-100">
		<!--提现记录-->
		<tn-tabs :list="tablist" :current="current" @change="change" :isScroll="false" activeColor="#fbbd12"
			name="tab_name" backgroundColor="#FFFFFF" :barWidth="150"></tn-tabs>
		<view class="tn-search-fixed bg-fff">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding">

				<view class="justify-content-item align-content-item" style="width: 100vw;">
					<view class="tn-flex tn-flex-col-center" @click="showtime=true"
						style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 90%;background-color: rgba(248, 247, 248, 0.9);">

						<input class="justify-content-item" placeholder="年/月/日" name="input"
							placeholder-style="color:#AAAAAA" :disabled="true" style="width: 90%;"
							v-model="startDate"></input>
						<text class="icon_item--icon tn-icon-calendar tn-text-xxl c-fbbd12"> </text>
						<text class="ma-lr-10 c-aaa">-</text>
						<input class="justify-content-item" placeholder="年/月/日" name="input"
							placeholder-style="color:#AAAAAA" :disabled="true" style="width: 90%;"
							v-model="endDate"></input>
						<text class="icon_item--icon tn-icon-calendar tn-text-xxl c-fbbd12"> </text>
					</view>

					<tn-calendar v-model="showtime" mode="range" @change="toPage('time',$event)"></tn-calendar>
				</view>

				<view class="align-content-item  pa-10  width30 list01">

					<tn-input class="width80 " v-model="type" type="select" :class="type=='全民故事'?'c-aaa':''"
						placeholder="全民故事" :selectOpen="selectShow" @click="selectShow = true" />

					<!-- 商品类型select -->
					<tn-select v-model="selectShow" mode="single" :list="selectList"
						@confirm="selectConfirm"></tn-select>

				</view>
			</view>
		</view>
		<view class="ma-20 pa-20 bg-fff b-r-15" v-for="(item,index) in list" :key="index" @click="btndetail(item)">
			<view class="flex f-between f-center">
				<view class="pa-b-30 pa-t-10">
					<view class="tn-color-gray--dark tn-text-md">{{item.time}}</view>
					<view class="ma-t-10 font-bold">{{item.name}}</view>
				</view>
				<view class="c-fbbd12">{{current==0?"处理中":"已到账"}}</view>
			</view>
			<view class="flex f-between pa-tb-40 b-t-1-F5 t-center">
				<view class="width30">
					<view>提现积分</view>
					<view class="ma-t-20 font-bold tn-color-red">￥8777.00</view>
				</view>
				<view class="width30">
					<view>积分价</view>
					<view class="ma-t-20 font-bold tn-color-red">￥177.00</view>
				</view>
				<view class="width30">
					<view>提现金额</view>
					<view class="ma-t-20 font-bold tn-color-red">￥77.00</view>
				</view>
			</view>
		</view>

		<tn-popup v-model="showpolicy" mode="center" :borderRadius="15" :closeBtn="true" width="80%">
			<view class="content">
				<view class="t-center font-bold tn-text-xl pa-tb-20">详情</view>
				<scroll-view scroll-y="true" class="" style="max-height: 800upx;">
					<view class=" pa-lr-40 pa-b-100">
						<!-- 页面内容 -->
						<view>
							<view>记录：</view>
							<view class="time-line__wrap">
								<tn-time-line>
									<block v-for="(item, index) in expressData" :key="index">
										<tn-time-line-item>
											<template slot="content">
												<view>
													<view class="time-line-item__content__time">{{ item.time }}</view>
													<view class="time-line-item__content__desc ma-t-20">{{ item.info }}
													</view>
													<view class="c-aaa tn-text-sm">{{ item.reason }}</view>
												</view>
											</template>
										</tn-time-line-item>
									</block>
								</tn-time-line>
							</view>
						</view>
						<view>
							<view>收款账户</view>
							<view class="c-aaa ma-l-20 pa-l-20 pa-t-20">
								<view>张三</view>
								<view class="ma-t-20 tn-text-sm">中国工商银行深圳东海支行</view>
								<view class="ma-t-10 tn-text-sm">银行卡号：1542 1526 2654 895</view>
							</view>
						</view>
						<!-- <view class="pa-tb-20">
							<view>证件</view>
							<view class="flex ma-l-20 pa-l-20 pa-t-20">
								<view class="width50">
									<image mode="widthFix" class="width90" src="/static/img/business.png"></image>
								</view>
								<view class="width50">
									<image mode="widthFix" class="width90" src="/static/img/business.png"></image>
								</view>
							</view>
		
						</view> -->
					</view>
				</scroll-view>
			</view>
		</tn-popup>
	</view>
</template>


<script>
	var _this;
	export default {
		data() {
			return {
				showpolicy: false,
				expressData: [{
						time: '2021-11-11 17:31',
						info: '审核不通过',
						reason: "原因：提交的数据出现错误，请与客服联系40088888888。",
					},
					{
						time: '2021-11-11 17:31',
						info: '审核不通过',
						reason: "",
					}
				],
				selectList: [{
						label: '醇香麦芽精酿啤酒‌',
						value: 1
					},
					{
						label: '沁爽青柠气泡水‌',
						value: 2
					},
					{
						label: '冰萃冷泡果味茶‌',
						value: 3
					}
				],
				tablist: [{
					tab_name: '申请中'
				}, {
					tab_name: '已提现'
				}],
				current: 0,
				showtime: false,
				startDate: "",
				endDate: "",
				type: "全民故事",
				selectShow: false,
				list:[{
					name:"醇香麦芽精酿啤酒‌",
					time:"2025-09-28 15:48:23"
				},{
					name:"‌沁爽青柠气泡水‌‌",
					time:"2025-09-13 10:18:26"
				},{
					name:"‌冰萃冷泡果味茶‌‌",
					time:"2025-09-08 11:24:43"
				},{
					name:"‌蜜桃乌龙风味汽水‌‌",
					time:"2025-09-08 10:37:18"
				},{
					name:"‌古法酿造米酒‌‌",
					time:"2025-08-26 15:48:23"
				},{
					name:"‌活力维C电解质水‌‌",
					time:"2025-08-22 13:43:53"
				},{
					name:"‌焦糖拿铁即饮咖啡‌‌",
					time:"2025-08-21 15:48:23"
				},]
			}
		},
		onLoad(e) {
			_this = this;
			_this.current = Number(e.tab);
		},
		mounted() {
			_this = this;
		},
		methods: {
			btndetail(val) {
				_this.showpolicy = true;
			},
			toPage(name, val) {
				if (name == "time") {
					_this.startDate = val.startDate;
					_this.endDate = val.endDate;
				}
				if (name == "del") {
					_this.startDate = "";
					_this.endDate = "";
				}
			},
			// 点击选择器
			selectConfirm(event) {
				_this.type = `${event[0]['label']}`
				console.log("event", event)
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style>
	.list01 {
		background-color: #f8f7f8e6;
		padding: 5px 10px;
		border-radius: 55px;
	}
</style>